<template>
  <div class="common-layout" :style="{ backgroundImage: `url(${backgroundImage})` }">
    <header class="transparent-header">
      <el-container>
        <el-header class="transparent-header">
          <el-menu :default-active="activeIndex" mode="horizontal" class="transparent-menu">
            <!-- 首页导航项 -->
            <el-menu-item index="1" @click="changeBackground('1')">首页</el-menu-item>

            <!-- 其他导航项 -->
            <el-menu-item index="2" @click="changeBackground('2')">区域找房</el-menu-item>
            <el-menu-item index="3" @click="gotoListView('minsu')">民宿短租</el-menu-item>
            <el-menu-item index="4" @click="gotoListView('urgent')">长短期急租</el-menu-item>
            <el-menu-item index="5" @click="gotoListView('rent')">我要出租</el-menu-item>
            <el-menu-item index="7" class="user-item">
              <el-icon class="user-icon" @click="toggleUserMenu"><UserFilled /></el-icon>
              <!-- 注册登录按钮 -->
              <div v-if="showUserMenu" class="user-menu" :style="{ backgroundColor: 'rgba(255, 255, 255, 0.5)' }">
                <router-link to="/reg" class="transparent-button">注册</router-link>
                <router-link to="/login" class="transparent-button">登录</router-link>
              </div>
              <el-icon><MoreFilled /></el-icon>
            </el-menu-item>
          </el-menu>
        </el-header>
      </el-container>
    </header>
  </div>

  <div class="dynamic-comment-section" :class="commentSectionClass">
    <h2>评论区</h2>
    <div class="comment-form">
      <el-input v-model="newComment" placeholder="请输入评论..."></el-input>
      <el-button @click="submitComment">提交</el-button>
    </div>
    <div class="comment-list">
      <div v-for="(comment, index) in comments" :key="index" class="comment">
        <span class="comment-author">匿名用户</span>
        <p class="comment-content">{{ comment }}</p>
      </div>
    </div>
  </div>


  <el-main>
    <div class="container">
      <div class="content-left">
        <!-- 热门楼盘导航 -->
        <el-menu default-active="hot" class="hot-properties">
          <el-menu-item index="hot" style="color: black;">热门楼盘</el-menu-item>
        </el-menu>


        <el-carousel indicator-position="outside" height="300px">
          <el-carousel :interval="4000" type="card">
            <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
              <div class="carousel-card">
                <router-link to="/detail" class="card custom-link">
                <img :src="item.image" class="carousel-image" alt="Carousel Image">
                <div class="carousel-caption">{{ item.caption }}</div>
                </router-link>
              </div>
            </el-carousel-item>
          </el-carousel>
        </el-carousel>
        <el-menu default-active="hot" class="hot-properties">
          <el-menu-item index="hot" style="color: black;">xxxxxx</el-menu-item>
        </el-menu>

        <el-carousel indicator-position="outside" height="300px">
          <el-carousel :interval="4000" type="card">
            <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
              <div class="carousel-card">
                <router-link to="/detail" class="card custom-link">
                <img :src="item.image" class="carousel-image" alt="Carousel Image">
                <div class="carousel-caption">{{ item.caption }}</div>
                </router-link>
              </div>
            </el-carousel-item>
          </el-carousel>
        </el-carousel>

        <el-menu default-active="hot" class="hot-properties">
          <el-menu-item index="hot" style="color: black;">xxxxx</el-menu-item>
        </el-menu>

        <el-carousel indicator-position="outside" height="300px">
          <el-carousel :interval="4000" type="card">
            <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
              <div class="carousel-card">
                <router-link to="/detail" class="card custom-link">
                <img :src="item.image" class="carousel-image" alt="Carousel Image">
                <div class="carousel-caption">{{ item.caption }}</div>
                </router-link>
              </div>
            </el-carousel-item>
          </el-carousel>
        </el-carousel>

        <el-menu default-active="hot" class="hot-properties">
          <el-menu-item index="hot" style="color: black;">xxxxx</el-menu-item>
        </el-menu>

        <el-carousel indicator-position="outside" height="300px">
          <el-carousel :interval="4000" type="card">
            <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
              <div class="carousel-card">
                <router-link to="/detail" class="card custom-link">
                <img :src="item.image" class="carousel-image" alt="Carousel Image">
                <div class="carousel-caption">{{ item.caption }}</div>
                </router-link>
              </div>
            </el-carousel-item>
          </el-carousel>
        </el-carousel>
        <el-menu default-active="hot" class="hot-properties">
          <el-menu-item index="hot" style="color: black;">xxxxx</el-menu-item>
        </el-menu>

        <el-carousel indicator-position="outside" height="300px">
          <el-carousel :interval="4000" type="card">
            <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
              <div class="carousel-card">
                <router-link to="/detail" class="card custom-link">
                <img :src="item.image" class="carousel-image" alt="Carousel Image">
                <div class="carousel-caption">{{ item.caption }}</div>
                </router-link>
              </div>
            </el-carousel-item>
          </el-carousel>
        </el-carousel>
      </div>

      <div class="content-right">
        <div>
          <el-menu default-active="hot" class="hot-properties">
            <el-menu-item index="hot" style="color: black;">专车看房</el-menu-item>
          </el-menu>
          <div>
            <el-row>
              <el-col :span="24">
                <div class="card-container">
                  <router-link to="/detail" class="card custom-link">
                    <img src="zc1.jpg" class="card-img" alt="Navigation Icon 1">
                    <div class="card-caption">xxxxx</div>
                  </router-link>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <div class="card-container">
                  <router-link to="/detail" class="card custom-link">
                    <img src="zc2.jpg" class="card-img" alt="Navigation Icon 2">
                    <div class="card-caption">xxxxxx</div>
                  </router-link>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <div class="card-container">
                  <router-link to="/detail" class="card custom-link">
                    <img src="zc3.jpg" class="card-img" alt="Navigation Icon 3">
                    <div class="card-caption">xxxxx</div>
                  </router-link>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <div class="card-container">
                  <router-link to="/detail" class="card custom-link">
                    <img src="zc4.jpg" class="card-img" alt="Navigation Icon 4">
                    <div class="card-caption">xxxxxxx</div>
                  </router-link>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <div class="card-container">
                  <router-link to="/detail" class="card custom-link">
                    <img src="zc5.jpg" class="card-img" alt="Navigation Icon 5">
                    <div class="card-caption">xxxxx</div>
                  </router-link>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <div class="card-container">
                  <router-link to="/detail" class="card custom-link">
                    <img src="zc6.jpg" class="card-img" alt="Navigation Icon 6">
                    <div class="card-caption">xxxxxx</div>
                  </router-link>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </div>
  </el-main>
  <hr>
  <footer>
    <div style="width: 1200px;margin: 0 auto;">
      <el-row :gutter="10">
        <!--底部左侧区域-->
        <el-col :span="8">
          <img src="/logo.png" style="width: 80px">
          <p>想要租房就看Home1ess</p>
          <p>租房首选平台</p>
          <p>全国成千上万房子等你来</p>
        </el-col>
        <!--底部中间区域-->
        <el-col :span="8" id="footer-center">
          <el-row :gutter="10">
            <el-col :span="8">
              <h3>关于我们</h3>
              <p>我要租房</p>
              <p>租房视频</p>
              <p>分类信息</p>
              <p>我要出租</p>
              <p>社区交流</p>
            </el-col>
            <el-col :span="8">
              <h3>服务与支持</h3>
              <p>联系我们</p>
              <p>广告投放</p>
              <p>用户协议</p>
              <p>友情链接</p>
              <p>在线反馈</p>
            </el-col>
            <el-col :span="8">
              <h3>底部导航</h3>
              <p>Archiver</p>
              <p>手机版</p>
              <p>小黑屋</p>
            </el-col>
          </el-row>
        </el-col>
        <!--底部右侧区域-->
        <el-col :span="8">
          <p style="font-size:60px;color:#666;margin: 10px 0;">
            <span style="color:cornflowerblue;">Home</span>1ess
          </p>
          <p >租房<span style="color: cornflowerblue">首选</span>平台</p>
        </el-col>
      </el-row>
    </div>
  </footer>

</template>
<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
const newComment = ref(''); // 用于存储新评论的内容
const comments = ref([]); // 用于存储评论列表
const commentSection = ref(null); // 用于存储评论区的DOM元素
const submitComment = () => {
  if (newComment.value.trim() !== '') {
    comments.value.push(newComment.value);
    newComment.value = ''; // 清空输入框
    // 调整评论区的位置和大小
    commentSection.value.style.height = 'auto'; // 允许评论区根据内容自动伸展
    commentSection.value.style.bottom = '0'; // 固定在页面底部
  }
};
onMounted(() => {
  // 获取评论区的DOM元素
  commentSection.value = document.querySelector('.dynamic-comment-section');
  // 初始化评论区位置
  commentSection.value.style.height = 'auto';
  commentSection.value.style.bottom = '0';
});

const activeIndex = ref('1'); // 初始化为首页的索引
const backgroundImage = ref('background7.jpg'); // 初始化背景图片
const showUserMenu = ref(false); // 控制用户菜单的显示与隐藏
const router = useRouter(); // 使用 useRouter 来获取路由实例

const changeBackground = (index) => {
  // 根据导航项的索引切换背景图片
  switch (index) {
    case '1':
      backgroundImage.value = 'background3.jpg';
      break;
    case '2':
      backgroundImage.value = 'background.png';
      break;
    case '3':
      backgroundImage.value = 'background8.jpg';
      break;
    case '4':
      backgroundImage.value = 'background3.jpg';
      break;
    case '5':
      backgroundImage.value = 'background4.jpg';
      break;
    case '7':
      backgroundImage.value = 'background.png';
      break;
    default:
      backgroundImage.value = 'background12.jpg';
      break;
  }
};
const carouselItems = ref([
  { image: '轮1.jpg', caption: 'xxxxxxxxxxxxxx', description: '这是轮播图1的说明文字。' },
  { image: '轮2.jpg', caption: 'xxxxxxxxxxxxxx', description: '这是轮播图2的说明文字。' },
  { image: '轮3.jpg', caption: 'xxxxxxxxxxxxxx', description: '这是轮播图3的说明文字。' },
  { image: '轮4.jpg', caption: 'xxxxxxxxxxxxxx', description: '这是轮播图4的说明文字。' },
  // 更多轮播图项
]);
const toggleUserMenu = () => {
  showUserMenu.value = !showUserMenu.value;
};

const gotoListView = (viewType) => {
  router.push({ name: 'ListView', params: { viewType } });
};
</script>
<style scoped>
.common-layout::before {
  content: '你有家吗？'; /* 第一行文字 */
  position: absolute;
  top: 30%; /* 调整顶部位置 */
  left: 10%; /* 调整左侧位置 */
  transform: translate(0, -50%);
  z-index: 500; /* 确保第一行文字的 z-index 比第二行高 */
  color: white;
  font-size: 18px;
  font-weight: bold;
  padding: 5px 10px;
  background-color: rgba(0, 0, 0, 0);
  border-radius: 5px;
  opacity: 0;
  animation: appear 5s ease-in-out forwards;
}

.common-layout::after {
  content: '你想要一个属于你的家嘛？'; /* 第二行文字 */
  position: absolute;
  top: 40%; /* 调整顶部位置 */
  left: 10%; /* 调整左侧位置 */
  transform: translate(0, -50%);
  z-index: 500; /* 确保第二行文字的 z-index 比第三行高 */
  color: white;
  font-size: 18px;
  font-weight: bold;
  padding: 5px 10px;
  background-color: rgba(0, 0, 0, 0);
  border-radius: 5px;
  opacity: 0;
  animation: appear 6s ease-in-out forwards;
  animation-delay: 1s; /* 延迟 1 秒开始动画 */
}
@keyframes appear {
  from { opacity: 0; }
  to { opacity: 1; }
}

.transparent-button {
  background-color: transparent !important;
  color: #fff !important;
  border: none !important;
  text-decoration: none; /* 添加这一行以去除链接下划线 */
}
.common-layout {
  min-height: 100vh;
  background-position: center bottom; /* 修改为'center bottom'以确保背景图片从底部居中 */
  background-size: cover;
  background-repeat: no-repeat;
  width: 100vw;
}

@media (max-width: 768px) {
  .common-layout {
    width: 90vw;
  }
}

.transparent-header {
  position: relative;
  z-index: 1;
  width: 100%;
  background-color: transparent;
  box-shadow: none;
}

.transparent-menu {
  display: flex;
  justify-content: space-between;
  flex-grow: 1;
  padding: 0 20px;
  background-color: transparent;
}

.el-menu-item {
  color: #fff;
}

.user-icon {
  color: #fff; /* 修改为#fff，以确保图标颜色为白色 */
  font-size: 24px;
}

.user-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  width: 75px; /* 修改为75px，以匹配用户图标的宽度 */
}

.user-menu button {
  margin-right: 10px;
}

.container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.content-left {
  width: 70%;
}

.content-right {
  width: 30%;
}

.carousel-card {
  position: relative;
  width: 100%;
  height: 100%;
}

.carousel-caption {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0);
  padding: 10px;
  font-size: 16px;
  border-radius: 5px;
}

.carousel-image {
  max-width: 100%;
  max-height: 100%;
  transition: transform 0.3s ease;
}

.carousel-image:hover {
  transform: scale(1.1);
}

.card-container {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.card {
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 20px;
  width: 430px;
  transition: transform 0.3s ease;
}

.card:hover {
  transform: scale(1.05);
}

.card-img {
  width: 100%;
  height: auto; /* 修改为'auto'以保持图片的纵横比 */
}

.custom-link {
  color: black;
  text-decoration: none;
}
.dynamic-comment-section {
  position: absolute;
  top: 50%; /* 设置评论区距离背景图顶部的距离，可以根据需要调整 */
  left: 80%; /* 设置评论区距离背景图左侧的距离，可以根据需要调整 */
  transform: translate(-50%, -50%); /* 将评论区水平和垂直居中 */
  background-color: rgba(255, 255, 255, 0.8); /* 设置评论区的背景颜色和透明度 */
  padding: 20px; /* 设置评论区的内边距，使内容不会贴紧边缘 */
  border-radius: 10px; /* 设置评论区的圆角 */
  max-width: 350px; /* 设置评论区的最大宽度，可以根据需要调整 */
}


.comment-form {
  margin-bottom: 10px; /* 设置评论表单与评论列表之间的间距 */
}

.comment-list {
  max-height: 200px; /* 设置评论列表的最大高度，使其可以滚动显示 */
  overflow-y: auto; /* 设置评论列表的垂直滚动 */
}

.comment {
  margin-bottom: 5px; /* 设置每条评论之间的间距 */
}

.comment-author {
  font-weight: bold; /* 设置评论作者的字体加粗 */
}

.comment-content {
  margin-top: 7px; /* 设置评论内容与评论作者之间的间距 */
}
</style>